<script setup lang='ts' name="add-car">
import { computed, ref, toRefs } from 'vue'
// import { cloneDeep } from 'lodash-es'

const props = defineProps<{
    data: any
}>()

const emits = defineEmits(['itemClick'])

const { data } = toRefs(props)

// const activeSku = ref<any>({})

// 已选中属性
const selected = ref<any>({})

const skuList = computed(() => {
    return data.value?.skuList ?? []
})

const skuAttr = computed(() => {
    return data.value?.skuAttr ?? []
})

function selectItem(item: any, val: string) {
    const flag = selected.value[item.name] === val
    // 缓存选中状态
    selected.value[item.name] = flag ? '' : val

    let skuPrice = ''
    if (skuList.value.length && Object.keys(selected.value).length) {
        const target = getPrice(skuList.value, selected.value)

        console.log('skuPrice---', target[0])

        if (target.length) {
            skuPrice = target[0].skuPrice
        }
        else {
            skuPrice = '询价'
        }
    }

    emits('itemClick', skuPrice)
}

// 根据已选条件 匹配价格
function getPrice(data: any, val: any) {
    const params = paramsIsNull(val)
    return data.filter((item) => {
        return Object.keys(params).every((key: string) => {
            const findKey = `${key}:${params[key]}`
            const flag = item.skuAttributeInfo.split(';').includes(findKey)
            return flag
        })
    })
}

// 删除空属性
function paramsIsNull(obj: any) {
    const _newPar = {}
    for (const key in obj) {
        if (
            (obj[key] === 0 || obj[key])
            && obj[key].toString().replace(/(^\s*)|(\s*$)/g, '') !== ''
        )
            _newPar[key] = obj[key]
    }
    // 返回新对象
    return _newPar
}
// function clickHandle(item: any) {
//     console.log(item)
//     if (item.productModel === activeSku.value.productModel) {
//         activeSku.value = {}
//     }
//     else {
//         activeSku.value = {
//             ...item,
//         }
//     }
//     emits('itemClick', activeSku.value)
// }
</script>

<template>
    <div class="h-450 overflow-y-auto">
        <!-- 存在得可选规格 -->
        <!-- <el-row>
            <el-col :span="5">
                选择规格：
            </el-col>

            <el-col :span="19">
                <div class="flex flex-wrap">
                    <div v-for="item in skuList" :key="item"
                        :class="{ 'c-#DA0004 border-#DA0004 bg-#FFF0F0': item.productModel === activeSku?.productModel }"
                        class="px-15 py-5 mb-16 mr-24 border-1 border-#D8D8D8 rounded-4 text-12 c-#767676 text-center cursor-pointer"
                        @click="clickHandle(item)">
                        {{ item?.skuName }}
                        <p>{{ item?.skuAttributeInfo }}</p>
                    </div>
                </div>
            </el-col>
        </el-row> -->
        <!-- 动态属性 -->
        <el-row v-for="(item, index) in skuAttr"
                :key="index"
        >
            <el-col :span="5">
                {{ item.name }}：
            </el-col>

            <el-col :span="19">
                <div class="flex flex-wrap">
                    <div v-for="(val, i) in item.value"
                         :key="`${index}-${i}`"
                         :class="{ 'c-#DA0004 border-#DA0004 bg-#FFF0F0': selected[item.name] === val }"
                         class="px-15 py-5 mb-16 mr-24 border-1 border-#D8D8D8 rounded-4 text-12 c-#767676 text-center cursor-pointer"
                         @click="selectItem(item, val)"
                    >
                        {{ val }}
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<style lang="less" scoped>

</style>
